<template>
  <div>
    <nav-bar title="历史考勤">
    </nav-bar>
    <div class="attendance maxinBox">
      <van-calendar
        :show-title="false"
        row-height="30"
        @confirm="onConfirm"
        :min-date="minDate"
        :max-date="maxDate"
        :poppable="false"
        :show-confirm="false"
        @month-show="onMonth"
        :style="{ height: '300px' }"
      />
      <div class="attendanceMessage backgroundfff marginTop5 fontSize14" style="padding-top: 0.3125rem;">
        <p class="titleModel">出勤信息</p>
        <div style="padding: 0 0.9375rem;">
          <label>安全学习：</label>
          <span v-if="brakeMachineList.signInTime">{{brakeMachineList.signInTime}}</span>
          <span v-else>未签到</span>
        </div>
        <div style="padding: 0 0.9375rem;">
          <label>工作时长：</label>
          <span v-if="brakeMachineList.fullHour">满勤</span>
          <span v-else>{{brakeMachineList.workHours || 0}}小时</span>
        </div>
        <div style="padding: 0 0.9375rem;">
          <label>加班时长：</label>
          <span v-if="brakeMachineList.overTimeHours">{{brakeMachineList.overTimeHours.toFixed(2)}}小时({{brakeMachineList.overTimeBeginTime | formatDate('HH:mm')}} - {{brakeMachineList.overTimeEndTime | formatDate('HH:mm')}})</span>
          <span v-else>0小时</span>
        </div>
        <div style="padding: 0 0.9375rem;">
          <label>签到次数：</label>
          <span>{{brakeMachineList.checkInCount || 0}}次</span>
        </div>
        <p class="titleModel">签到信息</p>
        <div class="brakeMachine tableData">
          <van-row class="tableTitle">
            <van-col :span="7">签到时间</van-col>
            <van-col :span="10">签到点位</van-col>
            <van-col :span="7">签到类型</van-col>
          </van-row>
          <van-row class="tableContent backgroundfff" v-for="(item, index) in brakeMachineList.checkInList" :key="index">
            <van-col :span="7">{{item.checkTime | formatDate('HH:mm:ss')}}</van-col>
            <van-col :span="10">{{item.checkPointName || '--'}}</van-col>
            <van-col :span="7">
              <span v-if="item.checkType === 1">上班签到</span>
              <span v-else-if="item.checkType === 2">加班签到</span>
              <span v-else-if="item.checkType === 3">加班签退</span>
              <span v-else>下班签到</span>
            </van-col>
          </van-row>
          <!-- <van-row v-for="(item,index) in brakeMachineList.checkInList" :key="index">
            <van-col :span="3">
              <svg-icon icon-class="circleRed" v-if="exception" />
              <svg-icon icon-class="circleBlack" v-else />
            </van-col>
            <van-col :span="7">{{item.checkTime | formatDate('HH:mm:ss')}}</van-col>
            <van-col :span="7">{{item.checkPointName || '--'}}</van-col>
            <van-col :span="7">
              <span v-if="item.checkType === 1">上班签到</span>
              <span v-else-if="item.checkType === 2">加班签到</span>
              <span v-else-if="item.checkType === 3">加班签退</span>
              <span v-else>下班签到</span>
            </van-col>
          </van-row> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import attendanceAPI from '../../../api/workAPI/attendanceAPI.js'
  export default {
    data() {
      return {
        minDate: new Date(2010, 0, 1),
        maxDate: new Date(),
        date: '',
        show: false,
        brakeMachineList: [],
        monthNow: '',
      }
    },
    methods: {
      // 查询每月到岗天数
      onMonth(date, title) {
        let dateNow = date.title.replace(/[^\d]/g,'')
        this.monthNow = dateNow.substr(4, 2)
        let monthNow = dateNow.substr(0, 4) + '-' + this.monthNow
        attendanceAPI.getAttendanceByMonth(1, {
          date: monthNow
        }).then(res => {
          this.monthList = res
        })
      },
      // 查询每日考勤
      getAttendance() {
        if (this.date) {
          this.date = this.date
        } else {
          this.date = moment(new Date()).format('YYYY-MM-DD')
        }
        let projectId = localStorage.getItem('projectId')
        attendanceAPI.getAttendance(projectId, {
          date: this.date
        }).then(res => {
          this.brakeMachineList = res
        })
      },
      formatDate(date) {
        return `${date.getMonth() + 1}/${date.getDate()}`;
      },
      onConfirm(date) {
        this.show = false;
        this.date = this.$options.filters['formatDate'](date)
        this.getAttendance()
      },
    },
    mounted() {
      this.getAttendance()
    }
  }
</script>

<style scoped lang="scss">
  .tableData{
    font-size: 0.875rem;
    .tableContent:nth-child(2n){
      padding: 0.625rem 0.9375rem;
      color: #666;
    }
    .tableContent:nth-child(2n + 1){
      padding: 0.625rem 0.9375rem;
      color: #666;
      background-color: #F6FAFF;
    }
    .tableTitle{
      padding: 0.625rem 0.9375rem;
      background-color: #F6F6F6;
      height: 1.25rem;
      color: #999;
    }
  }
  .attendance{
    .attendanceMessage label{
      font-weight: bold;
    }
    .brakeMachine{
      // line-height: 2.5rem;
      text-align: $center;
    }
    .titleModel{
      padding-left: 2 * $spacing;
      border-left: $border;
    }
    /deep/ .van-calendar__selected-day{
      height: 1.875rem;
      width: 1.875rem;
      border-radius: 50%;
      background-color: #1577FF;
    }
  }
</style>
